<!--  -->
<template>
    <div id='v-memo'>
        <div class="list" v-for="item in listArr" :key="item.id"
            @click="select(item.id)" v-memo="[item.id === active]"
        >
            {{ item.name }} --- {{ item.id == active }}
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive, onMounted, getCurrentInstance, nextTick } from "vue";

    const listArr = reactive<{id: number, name: string}[]>([]);
    for (let index = 0; index < 10000; index++) {
        listArr.push({ id: index + 1, name: `${index + 1} -- 测试` })
    }

    const active = ref(1)
    // 点击方法
    const select = async (index: number) => {
        active.value = index;
        console.time();
        nextTick(()=>{
            console.timeEnd();
        });
        // await Promise.resolve();
        
    }
    
    onMounted(()=>{  })
</script>
<style scoped lang="less">
</style>